<template>
    <header>
        <div class="banxin content">
            <img  :src="logo" height="50px" alt="" />
            <el-menu
                :default-active="active"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                router
                active-text-color="#ffd04b">
                <el-menu-item v-for="item  in navArr" :disabled="item.disable === 1" :key="item.id" :index="item.link">{{item.title}}</el-menu-item>
                </el-menu>
        </div>
        
    </header>
</template>

<script>
    const logo = require("../static/images/logo.png")
    import {NavApi} from '../request/api'
    export default {
        data(){
            return{
                logo:logo,
                navArr:[]
            }
        },
        created(){
            NavApi().then(res=>{
                if(res.errCode == 0){
                    this.navArr =  res.data
                }
                console.log(res)
            })
        },
        methods:{
            handleSelect(){

            }
        },
        computed:{
            // 当前路由的值
            active(){
                return this.$route.path
            }
        },  
        watch:{
            /* "$route.path":{
                handler(newVal,oldVal){
                    console.log(newVal,oldVal   )
                    if(newVal !== oldVal){
                        this.active = newVal
                    }
                }
            } */
        }
    }
</script>

<style  lang="less" scoped>
    header{
        background: rgb(84, 92, 100);
    }
.banxin{
  width: 1200px;
  margin:0 auto;
  display: flex;
  justify-content: space-between;
    .content{
        height: 60px;
    }    
}
</style>